<!-- 垃圾仓实时报警 -->
<template>
   <div class="alarm">
      <div class="boxTitle">
        <img src="@/assets/images/home/rulu.png" alt="">
        <span class="title">垃圾仓实时报警</span>
      </div>
      <div class="status">
        <span class="status_title">状态：</span>
        <span class="status_item" :class="{ 'status_active': statusIndex == 0 }" @click="changeStatus(0)">全部</span>
        <span class="status_item" :class="{ 'status_active': statusIndex == 1 }" @click="changeStatus(1)">未处理(12)</span>
        <span class="status_item" :class="{ 'status_active': statusIndex == 2 }" @click="changeStatus(2)">处理中(30)</span>
      </div>
      <div class="alarm_content">
        <div class="alarm_item" v-for="item in alarmList.list">
          <div class="alarm_head">
            <div class="alarm_left">
              <span class="alarm_status" :class="{'remind':item.level=='提醒','urgency':item.level=='紧急','critical':item.level=='危急'}">{{ item.level }}</span>
              <span class="alarm_title">{{ item.title }}</span>
            </div>
            <span class="alarm_right">{{ item.time }}</span>
          </div>
          <div class="content_body">
            <span class="content_left">{{ item.content }}</span>
            <span class="content_right" :class="{'processed':item.status=='已处理'}">{{ item.status }}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
let statusIndex = ref(0);

const changeStatus = (index: number) => {
  if (statusIndex.value != index) {
    statusIndex.value = index;
  }
}

const alarmList = reactive({
  list:[
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"提醒",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"已处理"},
    {level:"紧急",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"危急",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
    {level:"一般",title:"【设备报警】BIM制冷机房",time:"07-22 13:09:02",content:'烟雾传感器CQG-0999202：烟雾浓度过高未处理',status:"未处理"},
  ]
})
</script>

<style lang="scss" scoped>
.alarm {
    position: absolute;
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    bottom: vh(55);
    width: vh(421);
    height: vh(312);
    z-index: 999;
    padding-left: vh(20);
    // padding-right: vh(18);
    padding-right: vh(2);

    .boxTitle {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: vh(8);

      img {
        width: vh(15);
        height: vh(17);
      }

      .title {
        margin-left: vh(6);
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: vh(16);
        color: #00E3FE;
        line-height: vh(16);
      }
    }

    .status {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: vh(12);
      color: #FFFFFF;
      line-height: vh(12);
      margin-top: vh(16);

      .status_title {
        margin-right: vh(5);
      }

      .status_item {
        margin-right: vh(25);
        cursor: pointer;

        &.status_active {
          color: #00E3FE;
        }
      }
    }

    .alarm_content {
      // padding-left: vh(20);
      padding-right: vh(16);
      font-size: vh(12);
      color: #fff;
      height: vh(256);
      overflow: auto;
      .alarm_item {
        border-bottom: vh(1) dashed rgba(255,255,255, 0.2);
        .alarm_head {
          display: flex;
          align-items: center;
          margin-top: vh(18);
          margin-bottom: vh(11);
          .alarm_left {
            flex: 1;
            display: flex;
            align-items: center;
            .alarm_status {
              background-color: #EDA915;
              border-radius: vh(4) vh(4) 0 vh(4);
              width: vh(38);
              height: vh(20);
              line-height: vh(20);
              display: inline-block;
              text-align: center;
              margin-right: vh(3);
              &.remind{
                background-color: #2975FF;
              }
              &.urgency{
                background-color:  #ED6C15;
              }
              &.critical{
                background-color: #FF3232;
              }
            }
          }
          .alarm_right {
            width: vh(90);
            text-align: right;
          }
        }
        .content_body {
          margin-bottom: vh(13);
          padding-left: vh(45);
          display: flex;
          align-items: center;
          .content_left {
            flex: 1;
          }
          .content_right {
            width: vh(40);
            color: #EEBB30;
            text-align: right;
            &.processed{
              color:  #00EE7B;
            }
          }
        }
      }
    }
  }
</style>
